<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">
      <div class="top" style="text-align:center;">
        <template>
          <el-row :gutter="30">
            <el-col :span="6"><div>订单编号：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
            <el-col :span="6"><div>运单编号：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
            <el-col :span="6"><div>下单时间：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
            <el-col :span="6"><div>订单状态：<span style="color: #818693" class="a"> 1635173123131313</span></div></el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6"><div>预计到达日期：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
          </el-row>
        </template>
      </div>
      <div class="cneters">
        <el-collapse v-model="activeNames">
          <!-- 基本信息 -->
          <el-collapse-item name="1" title="基本信息" class="biaoti">
            <div class="center">
              <div class="jbxx">
                <el-row>
                  <div class="tar"><el-col :span="24"><span class="el-icon-location "><span class="ca">发货方</span></span></el-col></div>
                </el-row>
                <el-row>
                  <div class="t">
                    <el-col :span="24">
                      <span class="rt"> 发货方姓名：<span class="b" style="color: #818693">吴思涵</span></span>
                      <span> 发货方电话：<span class="b" style="color: #818693">1564532123</span></span>
                    </el-col>
                  </div>
                  <div class="t">
                    <el-col :span="24">
                      <span class="rc"> 发货方地址：<span class="b" style="color: #818693">四川成都金牛</span></span>
                      <span> 详细地址：<span class="b" style="color: #818693">西华大道</span></span>
                    </el-col>
                  </div>
                </el-row>

                <el-row :gutter="10">

                  <div class="tar"><el-col :span="24"><span class="el-icon-aim"><span class="ca">收货方</span></span></el-col></div>
                </el-row>
                <el-row :gutter="10">
                  <div class="t">
                    <el-col :span="24">
                      <span class="rt"> 收货方姓名：<span class="b" style="color: #818693">等啊</span></span>
                      <span> 发货方电话：<span class="b" style="color: #818693">1564532123</span></span>
                    </el-col>
                  </div>
                  <div class="t">
                    <el-col :span="24">
                      <span class="rc"> 发货方地址：<span class="b" style="color: #818693">四川成都金牛</span></span>
                      <span> 详细地址：<span class="b" style="color: #818693">西华大道</span></span>
                    </el-col>
                  </div>
                </el-row>
                <el-row :gutter="10">
                  <div class="tar"><el-col :span="24"><span class="el-icon-guide"><span class="ca">距离：<span class="i" style="color: #818693">11.06km</span></span></span></el-col></div>
                </el-row>

                <el-row :gutter="10">
                  <div class="tar"><el-col :span="24"><span>备注：<span class="ca">暂无</span></span></el-col></div>
                </el-row></div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 这里需要通过运单号来判断（有运单号就显示，没有运单号就不现实） -->
        <el-collapse v-model="activeNames">
          <el-collapse-item title="订单追踪" name="2">
            <div style="text-align:center" />
          </el-collapse-item>
        </el-collapse>
        <!-- 这里需要通过运单号来判断（有运单号就显示，没有运单号就不现实） -->
        <el-collapse v-model="activeNames">
          <el-collapse-item name="3" title="订单轨迹">
            <div class="bot" style="text-align:center">
              <baidu-map class="map" :scroll-wheel-zoom="true" :zoom="15" :center="{lng:116.404,lat:39.915}" />
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-model="activeNames">
          <!-- 取件信息 -->
          <el-collapse>
            <el-collapse-item name="4" title="取件信息">
              <div class="bot" style="text-align:center;">
                <template>
                  <div class="l">
                    <el-row :gutter="30">
                      <el-col :span="6"><div>所在网点：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
                      <el-col :span="6"><div>取件类型：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
                      <el-col :span="6"><div>作业状态：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
                      <el-col :span="6"><div>取件快递员：<span style="color: #818693" class="a"> 1635173123131313</span></div></el-col>
                    </el-row>
                  </div>
                  <el-row :gutter="10">
                    <el-col :span="6"><div>快递员电话：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
                    <el-col :span="6"><div>预计取件时间：<span style="color: #818693" class="a">1635173123131313</span></div></el-col>
                    <el-col :span="6"><div>取件完成时间：<span style="color: #818693" class="a">2023-1-12</span></div></el-col>
                  </el-row>
                </template>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-collapse>
        <el-collapse v-model="activeNames">
          <!-- 费用信息 -->
          <el-collapse>
            <el-collapse-item name="5" title="费用信息">
              <div class="bot1" style="text-align:center;">
                <template>
                  <div class="l">
                    <el-row :gutter="30">
                      <el-col :span="8"><div>运费：<span style="color: #818693" class="a"><span style="color:#ffb302">12</span>元</span></div></el-col>
                      <el-col :span="8"><div>支付方式：<span style="color: #818693" class="a">预结</span></div></el-col>
                      <el-col :span="8"><div>付款状态：<span style="color: #818693" class="a">未付</span></div></el-col>
                    </el-row>
                  </div>
                </template>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-collapse>

        <!-- 商品信息 -->
        <el-collapse v-model="activeNames">
          <el-collapse-item title="货品信息" name="6">
            <div class="content bot1">
              <el-table empty-text>
                <el-table-column label="序号" width="250" />
                <el-table-column label="货品名称" width="250" />
                <el-table-column label="货品类型" width="250" />
                <el-table-column label="重量（千克）" width="250" />
                <el-table-column label="体积（立方）" width="220" />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5', '6']
    }
  }
}
</script>

<style scoped>
.top{
  width:100% ;
  height: 135px;
  background-color: #fff;
  padding: 20px 20px 20px 20px;
  line-height: 45px;
  font-size: 16px;
}
.bot{
  width: 100%;
    /* height: 135px; */
  background-color: #fff;
   line-height: 45px;
  font-size: 16px;
   padding: 20px 90px 20px 20px;
}
.bot1{
  width: 100%;
    height: 95px;
  background-color: #fff;
   line-height: 45px;
  font-size: 16px;
   padding: 20px 90px 20px 20px;
}
.l{
  margin-bottom: 20px;
}
.a {
 margin-left: 10px;
}
.tar{
  font-size: 16px;
}
.ca{
  margin-left: 5px;
}
.t{
  margin-left: 50px;
}
.rt{
  padding-right: 130px;
}
.rc{
  padding-right: 90px;
}
.b{
  margin-left: 20px;
}
.i{
  margin-left: 10px;
}
::v-deep .el-collapse-item__header{

  height: 60px;
  line-height: 60px;
  background: #f8faff!important;
  border-radius: 4px 4px 0 0;
  color: #2a2929;
  font-size: 16px;
  font-weight: 700;
  padding: 0 44px;
  margin-top: 20px;
}
::v-deep .el-collapse-item__wrap{
    padding: 30px 30px;
}
::v-deep .el-col-24{
  margin-top: 25px;
}
::v-deep .el-table::before {
  overflow-y: hidden;
}
</style>

<style>
  .goodsmsg{
    width: 1270px;
    margin-top: 20px;
    border-radius: 10px;
   }
    .content{
      width: 1270px;
       background-color: #fff;
      /* height: 374px; */
      /* padding: 24px 28px; */
    }
    .el-table th{
  background-color: #f8faff!important;
}
  .map{
    height: 1000px;
  }
</style>

